<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.dtpicker.css" rel="stylesheet" />
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="power_station.html"></a>
			<h1 class="mui-title">南澳40MW重油电站</h1>

		</header>
		<div class="mui-slider" id="Gallery">
			<div class="mui-slider-group ">
				<!--第一个内容区容器-->
				<div class="mui-slider-item" id="1tab">

				</div>
				<!--第二个内容区-->
				<div class="mui-slider-item " id="2tab">

				</div>
				<div class="mui-slider-item " id="3tab">

				</div>
				<div class="mui-slider-item " id="4tab">

				</div>
				<div class="mui-slider-item " id="5tab">

				</div>
			</div>
		</div>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" onclick="location='table.html'">
				<img src="images/shuju.png" style="width: 20px;margin-top: 2px;" /><br>
				<span class="mui-tab-label ">数据</span>
			</a>
			<a class="mui-tab-item mui-active ">
				<img src="images/baobiao1.png"style="width: 20px;margin-top: 2px;"  /><br>
				<span class="mui-tab-label ">报表</span>
			</a>
			<a class="mui-tab-item ">
				<img src="images/gerenzhongxin.png" style="width: 20px;margin-top: 2px;" /><br>
				<span class="mui-tab-label ">个人中心</span>
			</a>
		</nav>
		<script src="js/mui.min.js "></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.dtpicker.js"></script>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js "></script>

		<script type="text/javascript ">
			mui.init()
			var dtpicker = new mui.DtPicker({
				"type": "date"
				})

			function dtPicker() {
				
				dtpicker.show(function(selectItems) {
					document.getElementById("dtPicker").value =selectItems.y.value+"-"+selectItems.m.value+"-"+selectItems.d.value;
				})
			}

			mui.ready(function() {
				var slider = document.getElementById('Gallery');
				var group = slider.querySelector('.mui-slider-group');
				var items = mui('.mui-slider-item', group);
				//克隆第一个节点
				var first = items[0].cloneNode(true);
				first.classList.add('mui-slider-item-duplicate');
				//克隆最后一个节点
				var last = items[items.length - 1].cloneNode(true);
				last.classList.add('mui-slider-item-duplicate');
				//处理是否循环逻辑，若支持循环，需支持两点：
				//1、在.mui-slider-group节点上增加.mui-slider-loop类
				//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
				var sliderApi = mui(slider).slider();
				group.classList.add('mui-slider-loop');
				group.insertBefore(last, group.firstChild);
				group.appendChild(first);
				sliderApi.refresh();

			});
			var slider = mui('#Gallery').slider();
			slider.gotoItem(1);
			$('#1tab').load('baobiao1.html');
			$('#5tab').load('baobiao5.html');
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				if(event.detail.slideNumber === 0) {
					$('#1tab').load('baobiao1.html');
					$('#2tab').html("");
					$('#3tab').html("");
					$('#4tab').html("");

				}
				if(event.detail.slideNumber === 1) {
					$('#2tab').load('baobiao2.html');
					$('#1tab').html("");
					$('#3tab').html("");
					$('#4tab').html("");

				} else if(event.detail.slideNumber === 2) {
					$('#3tab').load('baobiao3.html');
					$('#2tab').html("");
					$('#1tab').html("");
					$('#4tab').html("");

				} else if(event.detail.slideNumber === 3) {
					$('#4tab').load('baobiao4.html');
					$('#2tab').html("");
					$('#1tab').html("");
					$('#3tab').html("");

				} else if(event.detail.slideNumber === 4) {
					$('#2tab').html("");
					$('#1tab').html("");
					$('#3tab').html("");
					$('#4tab').html("");
				}
			});
		</script>
	</body>

</html>